<template>
  <view class="container">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
    <view class="menu">
      <view class="menu-item" v-for="(item, index) in dataList" :key="inde">
        <view class="menu-item-fl">
          <view class="title">
            {{item.title}}
          </view>
          <view class="time">
            {{item.time}}
          </view>
        </view>
        <view class="menu-item-fr">
          -{{item.number}}
        </view>
      </view>
    </view>
    </z-paging>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default{
    data(){
      return{
        params: {
          page: 1,
          limit: 10
        },
        dataList: []
      }
    },
   onShow() {
     this.$nextTick(() => {
       this.$refs.paging.refresh();
     })
   },
    methods: {
      queryList(pageNo, pageSize) {
        this.params.page = pageNo;
        this.params.limit = pageSize;
        reqApi.xiaofei(this.params).then(res => {
          console.log("消费列表", res);
          this.$refs.paging.complete(res.data.list);
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container{
    width: 100vw;
    min-height: 100vh;
    background: #fff;
    .menu{
      padding: 0 30rpx;
      box-sizing: border-box;
      .menu-item{
        display: flex;
        justify-content: space-between;
        height: 148rpx;
        align-items: center;
        border-bottom: 2rpx solid #eee;
        .menu-item-fl{
          .title{
            font-weight: 500;
            font-size: 32rpx;
            color: #000000;
          }
          .time{
            font-weight: 400;
            font-size: 24rpx;
            color: #000000;
          }
        }
        .menu-item-fr{
          font-weight: 500;
          font-size: 32rpx;
          color: #000000;
        }
      }

    }
  }
</style>